<template>
  <PageWrapper :title="getTitle" @back="goBack">
    <Description @register="register" class="mt-4"/>
    <a-card title="用户信息" :bordered="false" class="mt-5">
      <vxe-table
        border
        height="300"
        align="center"
        :data="tableData">
        <vxe-column
          v-for="config in tableColumn"
          :key="config.key"
          :type="config.type"
          :field="config.field"
          :title="config.title"
          :width="config.width"
          :filters="config.filters">
        </vxe-column>
      </vxe-table>
    </a-card>
  </PageWrapper>


</template>


<script setup lang="ts">
import {onMounted, ref, defineComponent} from 'vue';
import {getTerminalApi, getTerminalHpTicketApi} from '@/api/core/terminal.api';
import {Description, useDescription} from '@/components/Description';
import {Divider, Card, Empty, Descriptions, Steps, Tabs} from 'ant-design-vue';
import {detailSchema} from './terminal.data';
import {useRoute} from 'vue-router';
import {TerminalIndexGo} from '@/enums/core/terminal.enum';
import {useTabs} from '@/hooks/web/useTabs';
import {PageWrapper} from '@/components/Page';
import {useUserStore} from '@/store/modules/user';
import {DescItemSizeEnum} from '@/enums/basic';

const route = useRoute();
const {setTitle} = useTabs();
const getTitle = ref('终端信息详情');


const tableColumn = ref([
  {key: 99, title: '仓层', field: 'name', width: 200},
])
const tableData = ref([])

const [register, {setDescProps}] = useDescription({
  title: '终端信息详情',
  schema: detailSchema,
  column: DescItemSizeEnum.DEFAULT,
});

onMounted(async () => {
  const id = route.params.id as string;
  const data = await getTerminalApi(id);
  data.modelId = data.model.modelName;
  setDescProps({data: data});
  getTitle.value = '终端信息详情:' + data?.devNo;
  setTitle(getTitle.value);

  const hpTicketData = await getTerminalHpTicketApi(data?.devNo);

  tableData.value = []
  tableColumn.value = [
    {key: 99, title: '仓层', field: 'name', width: 200},
  ]
  const hp = data.model.hp.split(',')
  for (let row = 0; row < hp[0]; row++) {
    const rowData = {};
    rowData.name = '第' + (row + 1) + '层';
    for (let column = 0; column < hp[1]; column++) {
      // 列*行-（总列数-当前列）
      const hpId = (hp[1] - 1) * (row + 1) - ((hp[1] - 1) - column);
      rowData[`field_${column}`] = '【' + hpId + '号仓】'+(JSON.stringify(hpTicketData[hpId])===undefined?'0':hpTicketData[hpId].total)+'张';
    }
    tableData.value[row] = rowData;
  }
  for (let column = 1; column < hp[1]; column++) {
    tableColumn.value.push({
      key: `key_${column}`,
      field: `field_${column}`,
      title: `仓列【${column}】`,
      width: 200
    })
  }

});

/** 返回终端信息主页 */
function goBack() {
  useUserStore().getRoutePath(TerminalIndexGo);
}
</script>
